<template>
  <div class="dept-management-view" v-loading="loading">
    <div class="management-tree-view" v-show="showTree">
      <el-tree style="flex:1" :data="treeData" :props="treeProps" node-key="id" default-expand-all :expand-on-click-node="false"
      @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="tree-arrow-view" @click="showTree = !showTree">
      <div class="arrow-view"><i :class="showTree?'el-icon-caret-left':'el-icon-caret-right'"></i></div>
    </div>
    <div class="table-data-view" v-loading='tableLoading'>
      <div class="common-screen-view">
        <div class="common-screen-cell">
          <!-- <div class="common-screen-title" style="width:120px">部门名称：</div> -->
          <el-input v-model="condition" :placeholder="$t('tables_title.name')"></el-input>
        </div>

        <el-button type="primary" icon="el-icon-search" @click="searchDeptList">{{$t('global.search')}}</el-button>
        <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('dept_add')" @click="addDept">{{$t('global.add')}}</el-button>
        <el-button type="primary" icon="el-icon-folder-opened" @click="exportData">{{$t('global.export')}}</el-button>
      </div>
      <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @reviseDept="reviseDept" @delDept="delDept"
      ></table-list>
      <table-pagination
        :total="count"
        :currentPage="pageNow"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange">
      </table-pagination>
    </div>

    <el-dialog :title="$t('dept_management.edit_dept_info')" :close-on-click-modal="false" :visible.sync="deptInfoVisible" width="600px">
      <add-edit-dept :treeData="treeData" :editDeptInfo="editDeptInfo" @refreshData="refreshData" @cancelView="cancelView"></add-edit-dept>
    </el-dialog>

  </div>
</template>

<script>

import { getTreeNowUser,getDeptList,deleteDept} from '@/api/deptApi.js'
import { getDeptTreeData,exportToExcel } from '@/common/utils/util.js'
import { checkPermission } from '@/common/utils/permission.js'

export default {
  data(){
    return{
      loading:false,
      showTree:true,
      tableLoading:false,
      deptInfoVisible:false,
      treeData:[],          //树形数据
      treeProps: {
        children: 'children',
        label: 'name'
      },
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      pageSize:10,      //每页查询数量
      count:0,           //总数
      pageNow:1,        //当前页码
      condition:'',
      deptId:0,
      editDeptInfo:{}
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    tablePagination: () => import("@/components/table_pagination.vue"),    //引入页码组件   为方便拓展 把它与table组件分开封装
    addEditDept:()=>import("./add_edit_dept.vue"),
  },
  created(){
    this.tableConfig = {
      isCheckBox:true,
      props:[
        { type: "text", label: "tables_title.simple_name", prop: "simpleName"},
        { type: "text", label: "tables_title.full_name", prop: "fullName"},
        { type: "text", label: "tables_title.sort", prop: "sort"},
        { type: "text", label: "tables_title.remarks", prop: "description"},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseDept',code:'dept_update'},
        {label:'global.delete',callback:'delDept',code:'dept_delete'}]
    }
    this.getTreeNowUserList()
  },
  methods:{
    searchDeptList(){
      console.log(111)
      this.pageNow = 1
      this.getDeptInfoList()
    },
    getTreeNowUserList(){    //获取所有部门列表
      getTreeNowUser().then((res)=>{
        if(res.status == 200){
          this.treeData = getDeptTreeData(res.data)
          if(this.treeData.length > 0){
            this.getDeptInfoList()
          }
        }
      }).catch((e)=>{
        this.$message.error(e.message)
      })
    },
    getDeptInfoList(){          //获取部门列表
      this.tableLoading = true
      getDeptList({
        page:this.pageNow,
        limit:this.pageSize,
        condition:this.condition,
        deptId:this.deptId
      }).then((res)=>{
        this.tableLoading = false
        if(res.status == 200){
          this.count = res.data.count
          this.tableData = res.data.data
        }
        console.log(res)
      }).catch((e)=>{
        this.tableLoading = false
      })
    },
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    handleNodeClick(data){      //树形节点点击触发事件
      this.deptId = data.id
      this.pageNow = 1
      this.getDeptInfoList()
    },
    handleSizeChange(val){      //修改每页的显示条数
      this.pageSize = val
      this.pageNow = 1
      this.getDeptInfoList()
    },
    handleCurrentChange(val){   //切换当前页码
      this.pageNow = val
      this.getDeptInfoList()
    },
    addDept(){          //添加部分
      this.editDeptInfo = {}
      this.deptInfoVisible = true
    },
    reviseDept(row){        //修改部门
      this.editDeptInfo = row
      this.deptInfoVisible = true
    },
    cancelView(){       //关闭编辑角色弹窗
      this.deptInfoVisible = false
    },
    refreshData(){      //刷新表格数据
      this.deptInfoVisible = false
      this.page = 1
      this.getTreeNowUserList()
    },
    delDept(row){           //删除部门
      this.$confirm(this.$t('dept_management.del_dept') + ' "' + row.simpleName + '"?', this.$t('global.tips'), {
        confirmButtonText: this.$t('global.confirm'),
        cancelButtonText: this.$t('global.cancel'),
        type: 'warning'
      }).then(() => {
        let formData = new FormData()
        formData.append("deptId",row.deptId)
        deleteDept(formData).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message: this.$t('global.del_success'),
              type: 'success'
            });
            this.pageNow = 1
            this.deptId = 0
            this.getTreeNowUserList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    exportData(){
      let exportData = this.$refs.tableView.getCheckList()
      if(exportData.length == 0){
        this.$message({
          message: this.$t('global.select_export'),
          type: 'warning'
        });
        return
      }
      let columns = [
        {title:this.$t('tables_title.simple_name'),key:'simpleName'},
        {title:this.$t('tables_title.full_name'),key:'fullName'},
        {title:this.$t('tables_title.sort'),key:'sort'},
        {title:this.$t('tables_title.remarks'),key:'description'}
      ]
      exportToExcel(columns,exportData,this.$t('global.table_data_title'))
    }
  }
}
</script>

<style lang="scss" scoped>
.dept-management-view{
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
